<!DOCTYPE html>

<!-- $Id: slider.html 3 2012-04-03 12:44:18Z azbitnev@gmail.com $ -->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>

<title>starating</title>

<link href="960c12.css" rel="stylesheet" type="text/css"/>

<link href="http://dl.dropbox.com/u/68550731/red-sparkle/red.sparkle.min.css" rel="stylesheet" type="text/css"/> 
<!--[if IE]><link href="http://dl.dropbox.com/u/68550731/red-sparkle/red.sparkle.ie.min.css" rel="stylesheet" type="text/css"/><![endif]-->

<link href="../release/themes/grey.min.css" rel="stylesheet" type="text/css"/> 

<script src="http://code.jquery.com/jquery.min.js" charset="utf-8" type="text/javascript"></script>
<script src="../release/jquery.ys.min.js"></script>

<style>

body { margin: 1em; }

</style>

<script>

$(document).ready(function () {

	$.ys.starating.create('.rating', {
		value: function ($el) {
			return parseFloat($el.parents('tr:eq(0)').children('td:eq(2)').text())
		},
		onchange: function ($el, value) {
			$el.parents('tr:eq(0)').children('td:eq(2)').text(value.toFixed(1))
		}
	})

	$.ys.starating.create('.vote', {
		readonly: false,
		nstars: 10,
		onchange: function ($el, value) {
			$.ys.dialog.create('Your vote: ' + value)
		}
	})

})

</script>

</head>

<body>

	<table class="soft">
		<tr>
			<th>object</th>
			<th colspan="2">rating (1..5)</th>
		</tr>
		<tr>
			<td>object...</td>
			<td><div class="rating"></div></td>
			<td>5.0</td>
		</tr>
		<tr>
			<td>object...</td>
			<td><div class="rating"></div></td>
			<td>4.8</td>
		</tr>
		<tr>
			<td>object...</td>
			<td><div class="rating"></div></td>
			<td>4.4</td>
		</tr>
		<tr>
			<td>object...</td>
			<td><div class="rating"></div></td>
			<td>3.9</td>
		</tr>
		<tr>
			<td>object...</td>
			<td><div class="rating"></div></td>
			<td>3.5</td>
		</tr>
		<tr>
			<td>object...</td>
			<td><div class="rating"></div></td>
			<td>3.0</td>
		</tr>
		<tr>
			<td>object...</td>
			<td><div class="rating"></div></td>
			<td>2.5</td>
		</tr>
		<tr>
			<td>object...</td>
			<td><div class="rating"></div></td>
			<td>2.0</td>
		</tr>
		<tr>
			<td>object...</td>
			<td><div class="rating"></div></td>
			<td>1.5</td>
		</tr>
		<tr>
			<td>object...</td>
			<td><div class="rating"></div></td>
			<td>1.0</td>
		</tr>
		<tr>
			<td>object...</td>
			<td><div class="rating"></div></td>
			<td>0.5</td>
		</tr>
		<tr>
			<td>object...</td>
			<td><div class="rating"></div></td>
			<td>0.1</td>
		</tr>
		<tr>
			<td>object...</td>
			<td><div class="rating"></div></td>
			<td>0.0</td>
		</tr>
	</table>

	<br/>
	<span class="left float">Your vote (1..10):</span> <div class="vote left float"></div>

</body>